<style>
    body,
    html,
    #container {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "微软雅黑";
    }


    .data {
        width: 16%;
        height: 100%;
        background: url('../../img/map_bg.png') center;

    }

    .data > .data-title {
        width: 100%;
        height: 75px;
        padding: 10px 0 4px 0;
        box-sizing: border-box;
    }

    .data > .data-title > .title-center {
        width: 440px;
        height: 40px;
        box-sizing: border-box;
        border-right: 5px solid #0089ff;
        border-left: 5px solid #0089ff;
        line-height: 40px;
        font-size: 30px;
        font-weight: 600;
        color: white;
        text-align: center;
    }

    .data > .data-title > .title-left,
    .data > .data-title > .title-right {
        width: calc(50% - 220px);
        height: 3px;
        background: #0089ff;
        margin-top: 18px;
    }

    .BMap_cpyCtrl {
        display: none;
    }

    .data > .data-content {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }

    .data > .data-content > .con-left {
        width: 250px;
        height: 100%;
    }

    .data > .data-content > .con-left > .left-top {
        width: 100%;
        /*min-height:calc(100% - 20px);
margin-bottom: 20px;*/
        position: relative;
        overflow-y: auto;
        height: 100%;
    }

    .data > .data-content > .con-left > .left-top > .info {
        width: 98.5%;
        border: 1px solid #20558b;
        /*border-radius: 4px;*/
        box-sizing: border-box;
        position: relative;
        height: 100%;
    }

    .data > .data-content > .con-left > .left-top > .info > .info-title {
        width: 158px;
        height: 43px;
        background: url('../../img/info-title.png') no-repeat;
        position: absolute;
        top: -22px;
        left: 50%;
        margin-left: -74px;
        color: #fff;
        font-size: 18px;
        font-weight: 600;
        line-height: 43px;
        text-align: center;
    }

    .data > .data-content > .con-left > .left-top > .info > .info-main {
        width: 100%;
        height: 80%;
    }

    .data > .data-content > .con-left > .left-top > .info > .info-main > div {

        height: 60px;

        margin: 8px auto;
    }

    .data > .data-content > .con-left > .left-top > .info > .info-main > div.info-1 {
        /*margin-top: 40px;*/
    }

    .data > .data-content > .con-left > .left-top > .info > .info-main .info-img {
        width: 100px;
        height: 60px;
        position: relative;
    }

    .data > .data-content > .con-left > .left-top > .info > .info-main .info-img > img {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -24px;
        margin-top: -24px;
    }

    .data > .data-content > .con-left > .left-top > .info > .info-main .info-text {
        height: 68px;
        padding-left: 30px;
        padding-top: 8px;
        box-sizing: border-box;
    }

    .data > .data-content > .con-left > .left-top > .info > .info-main .info-text > p:nth-child(1) {
        color: #fff;
        font-weight: 600;
        font-size: 13px;
    }

    .data > .data-content > .con-left > .left-top > .info > .info-main > .info-1 > .info-text > p:nth-child(2) {
        font-weight: 600;
        color: #ffff44;
        font-size: 22px;
    }

    .data > .data-content > .con-left > .left-top > .info > .info-main > .info-2 > .info-text > p:nth-child(2) {
        font-weight: 600;
        color: #25f3e6;
        font-size: 22px;
    }

    .data > .data-content > .con-left > .left-top > .info > .info-main > .info-3 > .info-text > p:nth-child(2) {
        font-weight: 600;
        color: #f84a4a;
        font-size: 20px;
    }

    .data > .data-content > .con-left > .left-top > .info > .info-main > .info-4 > .info-text > p:nth-child(2) {
        font-weight: 600;
        color: #f5c847;
        font-size: 22px;
    }

    .data > .data-content > .con-left > .left-top > .top-bottom {
        width: 100%;
        /*background-color: rgba(0,24,106,0.5);*/
        margin-top: 20px;
        border: 1px solid #20558b;
        box-sizing: border-box;
        position: relative;
    }


    .data > .data-content > .con-left > .left-bottom {
        width: 100%;
        height: 25%;
        background-color: rgba(0, 24, 106, 0.5);
        border: 1px solid #20558b;
        box-sizing: border-box;
        position: relative;
    }

    .data > .data-content > .con-center {
        width: calc(100% - 250px);
        height: 100%;
        /*padding: 0 8px;*/
        box-sizing: border-box;
        position: relative;
    }

    .data > .data-content > .con-center > .map-num {
        width: 120px;
        /*height: 120px;*/
        position: absolute;
        top: -12px;
        left: 50px;
        z-index: 1000;
    }

    .data > .data-content > .con-center > .map-num > p {
        font-size: 18px;
        font-weight: 600;
        color: #fff;
    }

    .data > .data-content > .con-center > .map-num span {
        display: inline-block;
        width: 45px;
        height: 65px;
        text-align: center;
        line-height: 65px;
        background-color: #0089ff;
        color: #fff;
        font-size: 68px;
        font-weight: 600;
        font-family: "LcdD";
        margin-top: 15px;
    }

    .data > .data-content > .con-center > .map-num span:nth-child(2),
    .data > .data-content > .con-center > .map-num span:nth-child(6) {
        background-color: transparent;
        width: 30px;
    }

    .data > .data-content > .con-center > .cen-top {
        width: 100%;
        height: 100%;
        /*margin-top: -26px;*/
        /*background-color: rgba(0,24,106,0.3);*/
        /*border: 1px solid #0089ff;*/
        /*border-radius: 4px;*/
        /*box-sizing: border-box;*/
    }


    .data > .data-content > .con-center > .cen-bottom {
        width: 100%;
        height: 25%;
        background-color: rgba(0, 24, 106, 0.5);
        border: 1px solid #20558b;
        box-sizing: border-box;
        position: relative;
    }

    .data > .data-content > .con-right {
        width: 23.4375%;
        height: 100%;
    }

    .data > .data-content > .con-right > .right-top {
        width: 100%;
        height: 32%;
        background-color: rgba(0, 24, 106, 0.5);
        border: 1px solid #20558b;
        box-sizing: border-box;
        position: relative;
    }

    .data > .data-content > .con-right > .right-center {
        width: 100%;
        height: calc(36% - 40px);
        margin: 20px 0;
        background-color: rgba(0, 24, 106, 0.5);
        border: 1px solid #20558b;
        box-sizing: border-box;
        position: relative;
    }

    .data > .data-content > .con-right > .right-bottom {
        width: 100%;
        height: 32%;
        background-color: rgba(0, 24, 106, 0.5);
        border: 1px solid #20558b;
        box-sizing: border-box;
        position: relative;
    }

    .data > .data-content .title {
        height: 35px;
        line-height: 35px;
        width: 100%;
        color: #fff;
        font-weight: 600;
        padding-left: 15px;
        box-sizing: border-box;
    }

    .data > .data-content .charts {
        width: 100%;
        height: calc(100% - 35px);
    }

    .data > .data-content img.bj-1 {
        position: absolute;
        left: -1px;
        top: -1px;
    }

    .data > .data-content img.bj-2 {
        position: absolute;
        right: -1px;
        top: -1px;
    }

    .data > .data-content img.bj-3 {
        position: absolute;
        right: -1px;
        bottom: -1px;
    }

    .data > .data-content img.bj-4 {
        position: absolute;
        left: -1px;
        bottom: -1px;
    }

    .infoBox {
        border-radius: 5px;
        padding: 10px 18px 10px 10px;
        min-height: 150px;
    }

    .t_head {
        font-weight: 600;
    }

    .infoBox img {
        width: 20px;
        height: 20px;
    }

    .BMap_cpyCtrl {
        display: none;
    }

    .infoBoxContent:before {
        content: '';
        width: 0;
        height: 0;
        border: 20px solid transparent;
        border-top-color: white;
        position: absolute;
        left: 50%;
        top: 100%;
        margin-left: -20px;
    }

    .cartrack {
        text-align: center !important;
        color: blue !important;
        text-decoration: underline !important;
        padding-left: 48px;
        padding-bottom: 12px;
    }

    p {
        margin: 0px 0 5px !important;
    }

    .fullicon {
        cursor: pointer;
        height: 22px;
        width: 22px;
        float: right;
        padding-right: 38px;
        padding-top: 8px;
    }

    .data > .data-tips {
        width: 70%;
        height: 40px;
        float: left;
        margin-top: -30px;
        padding-left: 26%;
        text-align: left;
    }

    .data-tips-title {
        color: red;
        width: 200px;
        line-height: 40px;
    }

    .data-tips-content {
        color: white;
        width: 600px;
    }

    /*css 初始化 */
    html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
        margin: 0;
        padding: 0;
    }

    /*将标签原有的默认内外边距去掉*/

    fieldset, img, input, button {
        border: none; /*去掉边框*/
        padding: 0;
        margin: 0;
        outline-style: none; /*去掉环绕边框*/
    }

    ul, ol {
        list-style: none; /*去掉原样式中的小黑点*/
        /*ctrl+alt+l*/
    }

    input {
        padding-top: 0;
        padding-bottom: 0;

    }

    select, input {
        vertical-align: middle; /*输入字居中显示*/
    }

    select, input, textarea {
        font-size: 14px;
        margin: 0;
    }

    /**/
    textarea {
        resize: none; /*防止拖动*/
    }

    img {
        border: 0;
        vertical-align: middle; /*  去掉图片底部默认的3像素空白缝隙*/
    }

    table {
        border-collapse: collapse; /*合并外边线*/
    }

    body {
        font-family: Microsoft YaHei, Arial, "\5b8b\4f53";
    }

    .clearfix:before, .clearfix:after {
        content: "";
        display: table;
    }

    .clearfix:after {
        clear: both;
    }

    .clearfix {
        *zoom: 1; /*IE/7/6*/
        /*兼容IE6下的写法*/
    }

    h1, h2, h3, h4, h5, h6 {
        text-decoration: none; /**/
        font-weight: normal; /*不加粗*/
        font-size: 100%;
    }

    a {
        text-decoration: none;
    }

    s, i, em {
        /*一般起装饰作用*/
        font-style: normal; /*将字体变成正常字体*/
        text-decoration: none; /*去掉中划线*/
    }

    .fl {
        float: left;
    }

    .fr {
        float: right;
    }


</style>
<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=rth4FHH6vRGlq2GRv5hvKbM6cGfq0dzu"></script>


<div id="container" style="width: 83.5%;height: 100%;float:right;">

</div>
<div class="data" id="main">

    <div class="data-content">
        <div class="con-left fl">
            <div class="left-top">
                <div class="info">
                    <div class="title">数据统计<img class="fullicon" id="fullScreen" src="../../img/full-icon.png"
                                                title="点击全屏展示"></div>

                    <img src="../../img/bj-1.png" alt="" class="bj-1">
                    <img src="../../img/bj-2.png" alt="" class="bj-2">
                    <img src="../../img/bj-3.png" alt="" class="bj-3">
                    <img src="../../img/bj-4.png" alt="" class="bj-4">
                    <div class="info-main">
                        <div class="info-1">
                            <div class="info-img fl">
                                <img src="../../img/day-icon.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>今日订单数</p>
                                <p style="color:#d81e06;" id="sc0"></p>
                            </div>
                        </div>
                        <div class="info-2">
                            <div class="info-img fl">
                                <img src="../../img/net-icon.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>站点总数量</p>
                                <p style="color:#1afa29;" id="sc1"></p>
                            </div>
                        </div>
                        <div class="info-3">
                            <div class="info-img fl">
                                <img src="../../img/order-icon.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>库存订单数</p>
                                <p style="color:#d81e06;" id="sc2"></p>
                            </div>
                        </div>
                        <div class="info-3">
                            <div class="info-img fl">
                                <img src="../../img/arr-icon.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>到站库存数</p>
                                <p style="color:#f4ea2a;" id="sc3"></p>
                            </div>
                        </div>
                        <div class="info-3">
                            <div class="info-img fl">
                                <img src="../../img/send-icon.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>派送订单数</p>
                                <p style="color:#1afa29;" id="sc4"></p>
                            </div>
                        </div>
                        <div class="info-4">
                            <div class="info-img fl">
                                <img src="../../img/nc-icon.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>未核销订单</p>
                                <p style="color:#1296db;" id="sc5"></p>
                            </div>
                        </div>
                        <div class="info-3">
                            <div class="info-img fl">
                                <img src="../../img/week-icon.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>本周订单数</p>
                                <p style="color:#d4237a;" id="sc6"></p>
                            </div>
                        </div>
                        <div class="info-3">
                            <div class="info-img fl">
                                <img src="../../img/month-icon.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>本月订单数</p>
                                <p style="color:#1afa29;" id="sc7"></p>
                            </div>
                        </div>
                        <div class="info-4">
                            <div class="info-img fl">
                                <img src="../../img/year-icon.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>今年订单总数</p>
                                <p style="color:#1296db;" id="sc8"></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="position:fixed;bottom:15px;right:15px;font-size:24px;font-weight:700;">TMS物流</div>
</div>
<script>
    layui.use(['table', 'layer', 'form'], function () {
        //初始化
        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.jquery;
        var form = layui.form;

        var map = new BMapGL.Map('container');
        map.centerAndZoom(new BMapGL.Point(116.404, 39.928), 15);
        map.enableScrollWheelZoom(true);
        //加载图片
        var myIcon = new BMapGL.Icon("../../img/house.png", new BMapGL.Size(48, 48));
        $.post("../../ShowMap",
            function (data) {
                for (var i = 0; i < data.length; i++) {
                    mapIP(data[i].site, data[i].iPX, data[i].iPY, data[i].subName);
                }
            }, "json");



        $.post("../../MapNumeric",function (data) {
            for (var i = 0; i <= 8; i++) {
                $("#sc"+i).text(data[i]);
            }
            },"json");


        function mapIP(site, iPX, iPY, subName) {
            //获取地址
            var pt = new BMapGL.Point(iPX,iPY);
            var opts = {
                position: new BMapGL.Point(iPX,iPY), // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(0, 5) // 设置文本偏移量
            };
            // 创建文本标注对象
            var label = new BMapGL.Label(subName, opts);
            label.setStyle({
                color: 'blue',
                borderRadius: '5px',
                borderColor: '#ccc',
                padding: '10px',
                fontSize: '15px',
                height: '15px',
                lineHeight: '15px',
                fontFamily: '微软雅黑'
            });
            //创建标记点 装载地址和图片
            var marker = new BMapGL.Marker(pt, {icon: myIcon});
            //注入
            map.addOverlay(marker);
            map.addOverlay(label);
            //创建信息窗口
            var opts = {
                width: 150,
                height: 75,
                title: subName
            };
            var infoWindow = new BMapGL.InfoWindow(site, opts);
            //点标记添加点击事件
            marker.addEventListener('click', function () {
                map.openInfoWindow(infoWindow, pt); // 开启信息窗口
            });
        }

    })

</script>